<template>
  <!-- hot_tv区域 -->
  <div>
    <div class="hot_tv" v-for="HotTv in hottv" :key="HotTv.id">
      <img class="timg" :src="HotTv.imgmax" alt="" />
      <div class="tv_box">
        <img class="tvimg" :src="HotTv.imgmin" alt="" />
        <div class="tvdiv">
          <div class="tvup">
            <p class="pp1">{{ HotTv.name }}</p>
            <p class="pp2">{{ HotTv.des }}</p>
            <span class="sp">+在追</span>
          </div>
          <div class="tvdown">
            <span class="pd1">电视剧</span>
            <span class="pd2">热播轻喜剧 &gt;</span>
            <span class="iconfont icon-yuandiancaidan"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from "axios";

export default {
  name: "HotTv",
  data: function () {
    return {
      HotTvs: [],
    };
  },
  created() {
    // axios({
    //     url:"/hotTv"
    // })
    // .then(res=>{
    //     this.HotTvs=res.data
    //     console.log(this.HotTvs)
    // })
    // .catch(err=>console.log("err404",err));
    this.$store.dispatch("LINK_HOTTV_DATA","/home/hottv")
  },
  computed: {
    hottv() {
      return this.$store.state.HottvM.hottv;
    },
  },
};
</script>

<style scoped>
/* 热播区域 */

.hot_h {
  padding: 0 0 0.08rem 0.15rem;
  font-size: 0.18rem;
  /* background-color: rgb(184, 184, 184); */
}
.hot_ul {
  padding: 0 0.15rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.hot_ul .hli {
  width: 1.7rem;
  height: 1.55rem;
  /* background-color: rgb(94, 95, 32); */
}

.hot_ul .hli .himg {
  width: 1.7rem;
  height: 0.96rem;
}

.hot_ul .hli .hp1 {
  font-size: 14px;
  line-height: 28px;
}

.hot_ul .hli .hp2 {
  font-size: 12px;
  color: rgb(173, 173, 173);
}

/* hot_tv区域 */

.hot_tv {
  width: 3.84rem;
  /* height: 2.7rem; */
  /* background-color: rgb(209, 255, 191); */
  margin: 0 0.15rem 0.2rem;
}

.hot_tv .timg {
  width: 100%;
  height: 2.15rem;
  background-color: rgb(200, 255, 203);
}

.hot_tv .tv_box {
  width: 100%;
  height: 0.75rem;
  background-color: rgb(255, 255, 255);
  box-sizing: border-box;
  padding: 0 0.08rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hot_tv .tv_box .tvimg {
  height: 0.58rem;
  width: 0.44rem;
}

.hot_tv .tv_box .tvdiv {
  width: 2.77rem;
  height: 0.58rem;
  /* background-color: rgb(212, 220, 255); */
}

.hot_tv .tv_box .tvdiv .tvup {
  height: 0.34rem;
  width: 100%;
  /* background-color: rgb(124, 126, 255); */
  position: relative;
}

.hot_tv .tv_box .tvdiv .tvup .pp1 {
  font-size: 0.14rem;
  line-height: 0.14rem;
}

.hot_tv .tv_box .tvdiv .tvup .pp2 {
  font-size: 0.14rem;
  color: grey;
}

.hot_tv .tv_box .tvdiv .tvup .sp {
  display: block;
  box-sizing: border-box;
  border: 0.02rem solid rgb(243, 181, 218);
  color: rgb(233, 52, 136);
  width: 0.6rem;
  height: 0.34rem;
  line-height: 0.3rem;
  font-size: 0.12rem;
  text-align: center;
  border-radius: 0.17rem;
  position: absolute;
  right: 0;
  top: 0rem;
}

.hot_tv .tv_box .tvdiv .tvdown .pd1 {
  color: grey;
  font-size: 0.1rem;
  height: 0.2rem;
  line-height: 0.2rem;
  background-color: rgb(233, 233, 233);
  padding: 0.02rem 0.04rem;
}

.hot_tv .tv_box .tvdiv .tvdown .pd2 {
  color: rgb(233, 52, 136);
  font-size: 0.1rem;
  height: 0.2rem;
  line-height: 0.2rem;
  background-color: rgb(233, 233, 233);
  padding: 0.02rem 0.04rem;
}

.hot_tv .tv_box .tvdiv .tvdown .icon-yuandiancaidan {
  color: grey;
  font-size: 0.1rem;
  height: 0.2rem;
  line-height: 0.2rem;
  padding-left: 1.3rem;
}
</style>


